<template>
	<view class="wanl-article">
		<!-- 进度条 -->
		<!-- <view class="load-progress" :class="loadProgress!=0?'show':'hide'">
			<view class="load-progress-bar bg-green"
				:style="[{transform: 'translate3d(-' + (100-loadProgress) + '%, 0px, 0px)'}]"></view>
		</view> -->
		<u-notice-bar v-if="source == 99" type="error" :volume-icon="false" mode="horizontal" :list="[`请认真阅读下方服务协议，然后点击下方按钮同意协议`]" :is-circular="false" font-size="26"></u-notice-bar>
		<view class="article-title padding-lr text-lg text-bold" v-if="type == 'article'">{{detailsData.title}}</view>
		<view class="flex justify-between align-center" v-if="type == 'article'">
			<view class="article-meta">
				<text class="article-author">{{detailsData.author}}</text>
				<text class="article-text">发表于</text>
				<text class="article-time">{{detailsData.updatetime_text}}</text>
			</view>
			<view class="circleItemFooter">
				<view class="footerFlex">
					<view class="iconfont icon-liulan1"></view>
					<view class="footerFlexNum">{{detailsData.browse}}</view>
					<!-- <view @tap="follow(detailsData.id)" style="display: flex; align-items: center;">
						<view class="wlIcon-31guanzhu1" v-if="iscollect == 2"></view>
						<view class="text-green wlIcon-31guanzhu1xuanzhong" v-if="iscollect == 1"></view>
						<view class="footerFlexNum">{{detailsData.collect}}</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="margin-lr content" v-html="detailsData.content">
			<!-- <rich-text :nodes="detailsData.content"></rich-text> -->
		</view>
		<view class="safeAreaBottom" v-if="source == 99"></view>
		<view class="wanlian cu-bar foot" v-if="source == 99">
			<button :disabled="countdown > 0" @tap="confirm" class="cu-btn bg-green lg">{{btnText}}
				<text v-if="countdown > 0">({{countdown}})</text>
			</button>
		</view>
	</view>
</template>

<script>
	import htmlParser from '@/common/html-parser';
	export default {
		data() {
			return {
				loadProgress: 0, //进度条
				detailsData: {},
				type:'',
				iscollect: 2,
				loadding: false,
				source:0,
				btnText:'我已阅读并同意协议',
				countdown: 10,
				cTimer: null
			}
		},
		onLoad(option) {
			// 进度条
			this.LoadProgress();
			this.loadData(option);
			this.type = option.type
			if(option.source) {
				this.source = option.source
				if(option.source == 99) {
					this.startTimer();
					this.countdown = 10;
				}
			}
		},
		methods: {
			confirm() {
				this.$wanlshop.prePage().checked = true;
				this.$wanlshop.back(1)
			},
			startTimer() {
				if (this.cTimer == null) {
					this.cTimer = setInterval(() => {
						this.countdown--;
						if (this.countdown == 0) {
							this.clearTimer();
						}
					}, 1000)
				}
			},
			clearTimer() {
				clearInterval(this.cTimer);
				this.cTimer = null;
			},
			// 关注 & 取消
			async follow(id) {
				this.loadding = true;
				if(!this.loadding) return false;
				await uni.request({
					url: '/member/collect/add',
					method: 'POST',
					data: {
						type:9,
						source_id: id
					},
					success: res => {
						this.loadding = false;
						this.detailsData.collect = this.iscollect == 1 ? this.detailsData.collect - 1 : this.detailsData.collect + 1;
						this.iscollect = this.iscollect == 1 ? 2 : 1;
						this.$wanlshop.msg(`${this.iscollect == 1 ? '关注成功' : '取消关注'}`)
					}
				});
			},
			async ifcollect(id) {
				await uni.request({
					url: '/member/collect/iscollect',
					method: 'POST',
					data: {
						type: 9,
						source_id: id
					},
					success: res => {
						this.iscollect = res.data;
					}
				})
			},
			// 异步加载
			async loadData(data) {
				let params = {};
				if (data.type && data.type == 'singlepage') {
					params = {
						type: data.id
					}
				} else {
					params = {
						id: data.id
					}
				}
				await uni.request({
					url: `/information/${data.type}/detail`,
					data: params,
					success: res => {
						//详情正则
						res.data.content = res.data.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (
							match, capture) => {
							var img =
								`<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture, 500, 0)}">`;
							return img;
						});
						this.detailsData = res.data;
						this.loadProgress = 90;
						this.$wanlshop.title(res.data.title);
						// if(data.type == 'article' && this.$store.state.user.isLogin) {
						// 	this.ifcollect(res.data.id)
						// }
					}
				});
			},
			// 进度条
			LoadProgress() {
				this.loadProgress = this.loadProgress + 2;
				if (this.loadProgress < 100) {
					setTimeout(() => {
						this.LoadProgress();
					}, 100)
				} else {
					this.loadProgress = 0;
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #fff;
	}

	.wanl-article .content {}

	.article-meta {
		padding: 10rpx 30rpx 0 30rpx;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		color: gray;
		.article-text {
			font-size: 24rpx;
			line-height: 50rpx;
			margin: 0 10rpx;
		}

		.article-author {
			font-size: 24rpx;
		}

		.article-time {
			font-size: 24rpx;
		}
	}
	.circleItemFooter {
		padding: 0 30rpx;
		.footerFlex {
			display: flex;
			align-items: center;
	
			.footerFlexImg {
				width: 42rpx;
				height: 42rpx;
				border-radius: 100%;
			}
	
			.footerFlexName {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #888888;
				margin-left: 8rpx;
			}
	
			.icon-liulan1 {
				font-size: 32rpx;
			}
	
			.footerFlexNum {
				font-size: 26rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				color: #777777;
				margin-left: 10rpx;
			}
	
			.wlIcon-31guanzhu1,.wlIcon-31guanzhu1xuanzhong {
				margin-left: 20rpx;
				font-size: 32rpx;
			}
	
			.icon-comment {
				margin-left: 20rpx;
				font-size: 32rpx;
			}
		}
	}
	
.wanlian {
	background-color: #fff;
	bottom: 0;
	.cu-btn {
		margin: 0 auto;
		width: 428rpx;
		height: 64rpx;
		background: #4CBD66;
		border-radius: 6rpx;
	}
}
uni-button[disabled]:not([type]), uni-button[disabled][type=default] {
	color: #fff !important;
}
</style>